<template>
  <div>
    <!-- 大盒子 -->
    <van-popup
      v-model="collapseMenu"
      position="bottom"
      duration="0.5"
      :style="{ height: '100%' }"
    >
      <MusicMaxPlayer
        :currentTime="currentTime"
        :duration="duration"
        @fatherMethod="fatherMethod"
        v-if="isRouterAlive"
      />
    </van-popup>
    <!-- 小盒子 -->
    <MusicMiniPlayer :currentSong="currentSong" />
    <!-- 播放器 -->
    <audio
      ref="audio"
      preload="auto"
      @canplay="canplay"
      @timeupdate="timeupdate"
      @ended="ended"
      @play="play"
      @pause="pause"
    >
      <source
        :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`"
        type="audio/mpeg"
      />
    </audio>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { mapGetters } from "vuex";
import MusicMaxPlayer from "./max_player.vue";
import MusicMiniPlayer from "./mini_player.vue";
import { GetisPlayAPI } from "@/api/api.js";

export default {
  name: "MusicPlayIndex",
  components: { MusicMaxPlayer, MusicMiniPlayer },
  // provide就相当于加强版父组件prop，可以跨越中间组件，inject就相当于加强版子组件的props
//pro夫  //in子无一闪页面效果
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    
    return {
      currentTime: 0,
      duration: 0,
      isRouterAlive: true,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.ListenRecently(this.currentSong);
      this.getCurrentIndex(this.currentIndex);
    });
  },
  computed: {
    ...mapGetters([
      "currentSong",
      "modePlays",
      "PlayListLength",
      "playing",
      "currentIndex",
      "sequencePlayList",
      "ListenRecentlyList",
    ]), //计算数据
    id() {
      return this.currentSong.id;
    },
    collapseMenu: {
      get() {
        return this.$store.state.fullScreen;
      },
      set(v) {},
    },
  },
  watch: {
    currentTime(val) {
      this.$store.commit("SET_PROGRESS", parseInt((val / this.duration) * 100));
    },
    sequencePlayList(val) {
      //播放列表
      this.$store.commit("SET_SEQUENCEPLAYLIST", val);
    },
    playing(newVal) {
      //监听播放按钮状态
      this.$nextTick(function () {
        if (newVal) {
          this.$refs.audio.play();
        } else {
          this.$refs.audio.pause();
        }
      });
    },
    currentSong(val) {
      this.ListenRecently(val); //添加最近播放
    },
    id(val) {
      this.isPlay(val); //检测是否可以播放
      this.$refs.audio.load(); //切换音乐重新加载
      this.$nextTick(function () {
        this.reload(); //刷新
        this.$refs.audio.play();
      });
    },
    currentIndex(val) {
      //先获取当前索引
      this.$store.commit("SET_CURRENTINDEX", val);
    },
  },
  methods: {
    reload() {
      //刷新
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    canplay() {
      this.duration = parseInt(this.$refs.audio.duration);
    },
    timeupdate() {
      this.currentTime = this.$refs.audio.currentTime;
    },
    play() {
      this.$store.commit("SET_PLAY", true);
    },
    pause() {
      this.$store.commit("SET_STOPPLAY", false);
    },
    ended() {
      this.currentTime = 0;
      let val = this.PlayListLength;
      let value = this.modePlays;
      if (val == 1) {
        //单曲 列表时
        this.currentTime == 0;
        this.$refs.audio.load();
        this.$refs.audio.play();
        return;
      } else {
        switch (value) {
          case 0: //正常播放
            let index = this.currentIndex + 1;
            if (index == this.PlayListLength) {
              index = 0;
            }
            this.$store.commit("SET_PREVIOUS", index);
            break;
          case 1: //单曲播放
            this.currentTime == 0;
            this.$refs.audio.load();
            this.$refs.audio.play();
            break;
          case 2: //随机播放
            this.getrand(0, this.PlayListLength);
            break;
          default:
            break;
        }
      }
    },
    fatherMethod(val) {
      this.$refs.audio.currentTime = val;
    },
    getrand(n, m) {
      //随机播放
      let index = this.currentIndex;
      let rand = parseInt(Math.random() * m);
      if (rand !== index) {
        this.$store.commit("SET_PLAY_RAND", rand);
        return;
      } else {
        let indexs = this.currentIndex + 1;
        if (indexs == this.PlayListLength) {
          indexs = 0;
        }
        this.$store.commit("SET_PREVIOUS", indexs);
        return;
      }
    },
    ListenRecently(val) {
      //添加最近播放
      for (var i in val) {
        //先遍历是不是 有值
        const list = this.ListenRecentlyList;
        if (list.length == 0) {
          //列表为空直接 添加
          this.$store.commit("SET_LISSTENRECENTLY", val);
          return;
        } else {
          for (let i = 0; i < list.length; i++) {
            const element = list[i];
            if (element.id == val.id) {
              //有相同先删除 再添加到最前面
              this.$store.commit("SET_LISSTENRECENTLY_SLICELIST", i);
              this.$nextTick(function () {
                this.$store.commit("SET_LISSTENRECENTLY", val);
              });
              return;
            }
          }
          this.$store.commit("SET_LISSTENRECENTLY", val);
          return;
        }
      }
      return;
      //遍历对象，如果有值，返回true，不为空，返回false为空对象
    },
    isPlay(id) {
      //判断音乐是否可用
      if (this.currentSong.fee == 1 || this.currentSong.fee == 4) {
        this.$nextTick(function () {
          Dialog.alert({
            title: "版权原因",
            message: `当前音乐无法播放`,
          }).then(() => {
            this.$refs.audio.pause();
          });
        });
        return;
      } else {
        GetisPlayAPI({ id })
          .then((res) => {
            return;
          })
          .catch((err) => {
            this.$refs.audio.pause();
            this.$nextTick(function () {
              Dialog.alert({
                title: "网络差或音乐不可用",
              }).then(() => {
                this.$refs.audio.pause();
              });
            });
            return;
          });
      }
    },
    getCurrentIndex(val) {
      this.$store.commit("SET_CURRENTINDEX", val);
    },
  },
};
</script>

<style lang="less" scoped>
</style>